'use client'
import React, {useState} from "react"
import styles from "./index.module.scss"
import Image from "next/image"
import { timeAgo } from "@/utils/time"

interface UserProps{
  className?: string
  info:{
    [key: string]: any
  }
}

const User: React.FC<UserProps> = ({className = '', info = {}}) => {
  return(<div className={`${className} ${styles['user-componet']}`}>
    <div className={`${styles["user-info"]}`}>
      <div className={`${styles["user-img"]}`}>
        <Image width={36} height={36} alt="图像" src={"/user-avator.jpg"} className={`${styles["pic"]}`}/>
      </div>
      <div className={`${styles["driver"]}`}>
        <span className={`${styles["userName"]}`}>{info.nickname}</span>
        <div className={`${styles["car-info"]}`}>
          <span className={`fa fa-solid fa-car ${styles["car-color"]}`}></span>
          <span className={`${styles['authen']}`}>已认证</span>
        </div>
      </div>
    </div>
    <div className={`${styles["other-info"]}`}>
      <span>{ info?.created_at ? timeAgo(info.created_at) : info?.created_at}</span>
    </div>
  </div>)
}

export default User;